package myJs.cps

import myJs.Implicits._
import myJs.myPkg.DatetimePickerOptions
import myJs.myPkg.jquery.$
import myJs.myPkg.reactHookForm.UseFormRT
import myJs.tool.Tool
import org.scalajs.dom.{Event, html}
import org.scalajs.dom.html.{Div, Input}
import slinky.core.{FunctionalComponent, SyntheticEvent, TagElement}
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useEffect
import slinky.core.facade.React
import slinky.web.html._

/** Created by yz on 21/1/2022
  */
@react object PureDateTimePickerWithIconCp {

  case class Props(
      useForm:UseFormRT,
      placeHolder: String = "",
      name: String = "",
      onChangeF: String => Unit,
      value: String,
      pattern: String = "yyyy-mm-dd hh:ii:ss"
  )

  val component = FunctionalComponent[Props] { props =>
    val divRef = React.createRef[Div]

    object FTool {

    }

    useEffect(
      () => {
        val options = DatetimePickerOptions(
          format = props.pattern,
          autoclose = true,
          language = "zh-CN",
        )
        $(divRef.current).datetimepicker(options)
      },
      List()
    )

    useEffect(() => {
      $(divRef.current).offThenOn(
        "changeDate",
        (e: Event) => {
          val myV = $(divRef.current).find(":input").myVal
          props.onChangeF(myV)
        }
      )
      () => {
        $(divRef.current).off("changeDate")
      }
    })

    div(
      className := "input-group date datePicker",
      ref := divRef,
      PureInputCp(useForm = props.useForm, `type` = "text",
        name = props.name, width = "100%", placeHolder = props.placeHolder,
        value = props.value, onChange = props.onChangeF),
      span(className := "input-group-addon", span(className := "glyphicon glyphicon-time"))
    )

  }

}
